import Taro, {Component, Config} from "@tarojs/taro";
import {AtImagePicker} from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {View, Input, Picker, Image, Text, Button, Form} from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'

import {getRuntime} from '../../utils/common'
import PageFooterInfo from '../../components/PageFooterInfo'

import './index.less'

// 工商服务中心-报税、年检、注销-注销]
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page1 extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    companyName: '', // 公司名称
    businessScopeArr: [], // 经营范围
    businessScope: '', // 经营范围
    certificateIMGArr: [], // 营业执照图片
    certificateIMG: '', // 营业执照图片
    openAnAccountIMGArr: [], // 开户许可证图片
    openAnAccountIMG: '', // 开户许可证图片
    iDcardImgArr: [], // 法人省份证正反面
    iDcardImg: '', // 法人省份证正反面
    institutionalFrameworkIMGArr: [], // 组织机构代码证
    institutionalFrameworkIMG: '', // 组织机构代码证
    registerImgArr: [], // 国税/地税登记证书
    registerImg: '', // 国税/地税登记证书
    contactsName: '', // 联系人姓名
    phoneNumnber: '', // 联系电话
    emailAddress: '', // 联系人邮箱地址
    address: '', // 联系地址
    type: 2, // 注册类型 (0 = GSBS , 1 = GSNJ , 2 = GSZX , 3 = YYZZDB ) = ['0', '1', '2', '3']
    loading: false,
    disabled: false,
    submitText: '立即预约办理'
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '公司注销'})
  }


  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  onChangeImg(type:string,e) {
    // console.log(e)
    getRuntime().uploadFile(e, res => {
      // console.log(res)
      this.setState({
        [type+'Arr']: e,
        [type]: res.join(',')
      })
    })
  }

  formSubmit(e) {
    let { certificateIMG,type,openAnAccountIMG,iDcardImg,institutionalFrameworkIMG,registerImg } = this.state
    let { companyName, contactsName, phoneNumnber, emailAddress, address } = e.detail.value
    let { FinancialCenterStore } =  this.props.stores
    if(!companyName){getRuntime().showToast('公司名称不能为空~'); return false}
    if(!contactsName){getRuntime().showToast('联系人姓名不能为空~'); return false}
    if(!phoneNumnber){getRuntime().showToast('联系人电话不能为空~'); return false}
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    FinancialCenterStore.saveCompanyTaxReturn({
      form: {
        type, companyName,certificateIMG,openAnAccountIMG,iDcardImg,institutionalFrameworkIMG,registerImg,contactsName, phoneNumnber,
        emailAddress, address
      },
      callback: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即预约办理'
        })
        getRuntime().navigateTo('/pages/business/business_success')
      }
    })
  }

  render() {
    let { loading,disabled,submitText,certificateIMGArr,openAnAccountIMGArr,iDcardImgArr,institutionalFrameworkIMGArr,registerImgArr }
    = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name'>公司名称</View>
             <Input className='from-input' name='companyName' placeholderClass='placeholder_class' placeholder='请填写公司名称'/>
           </View>
           <View className='input-group input-upload'>
             <View className='input-name'>上传组织机构代码证</View>
             <AtImagePicker
               length={4}
               count={2}
               showAddBtn={true}
               files={institutionalFrameworkIMGArr}
               name='institutionalFrameworkIMG'
               onChange={this.onChangeImg.bind(this,'institutionalFrameworkIMG')}
             />
           </View>
           <View className='input-group input-upload'>
             <View className='input-name'>上传营业执照</View>
             <AtImagePicker
               length={4}
               count={2}
               showAddBtn={true}
               files={certificateIMGArr}
               name='certificateIMG'
               onChange={this.onChangeImg.bind(this,'certificateIMG')}
             />
           </View>
           <View className='input-group input-upload'>
             <View className='input-name'>上传法人身份证正反面</View>
             <AtImagePicker
               length={4}
               count={2}
               showAddBtn={true}
               files={iDcardImgArr}
               name='iDcardImg'
               onChange={this.onChangeImg.bind(this,'iDcardImg')}
             />
           </View>
           <View className='input-group input-upload'>
             <View className='input-name'>上传国税、地税登记证 </View>
             <AtImagePicker
               length={4}
               count={1}
               showAddBtn={true}
               files={registerImgArr}
               name='registerImg'
               onChange={this.onChangeImg.bind(this,'registerImg')}
             />
           </View>
           <View className='input-group input-upload'>
             <View className='input-name'>上传用户许可证</View>
             <AtImagePicker
               length={4}
               count={1}
               showAddBtn={true}
               files={openAnAccountIMGArr}
               name='openAnAccountIMG'
               onChange={this.onChangeImg.bind(this,'openAnAccountIMG')}
             />
           </View>
         </View>

          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name'>联系人</View>
              <Input className='from-input' name='contactsName' placeholderClass='placeholder_class' placeholder='请填写联系人' />
            </View>
            <View className='input-group'>
              <View className='input-name'>联系电话</View>
              <Input className='from-input' type={"number"} maxLength={11} name='phoneNumnber' placeholderClass='placeholder_class' placeholder='请填写联系电话' />
            </View>
            <View className='input-group'>
              <View className='input-name'>联系邮箱</View>
              <Input className='from-input' name='emailAddress' placeholderClass='placeholder_class' placeholder='请填写联系邮箱' />
            </View>
            <View className='input-group'>
              <View className='input-name'>联系地址</View>
              <Input className='from-input' name='address' placeholderClass='placeholder_class' placeholder='请填写联系地址' />
            </View>
          </View>

          <Button className='page-submit' formType='submit' disabled={disabled} loading={loading}>{submitText}</Button>
       </Form>
        <PageFooterInfo />

      </View>
    )
  }
}

export default Page1
